<template>
  <div class="container">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="details">
      <div class="details-img">
        <!-- <img
          :src="'http://www.xiaoshuaipeng.com:8080' + list.houseImg[0]"
          alt=""
        /> -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, key) in list.houseImg" :key="key">
            <img
              :src="'http://www.xiaoshuaipeng.com:8080' + item"
              alt=""
              @click="chak"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <div class="title">
          <p>{{ list.title }}</p>
          <p>
            <span v-for="(a, index) in list.tags" :key="index">{{ a }}</span>
          </p>
        </div>
        <div class="house-title">
          <p>{{ list.description }}</p>
        </div>
      </div>
     <h3 style="margin: 0 auto;">地图</h3>

      <baidu-map
        class="map"
        :center="center"
        :zoom="zoom"
        @ready="handler"
        ak="EPyYDMUwkhjSkAHQvGedWttDsgDUqyPr"
      >
      </baidu-map>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { ImagePreview } from "vant";
import { details } from "@/api/user";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  // name:'',
  components: {
    BaiduMap,
  },
  data() {
    return {
      title: "",
      list: {},
      show: false,
      zoom: 20,
      center: { lng: 0, lat: 0 },

    };
  },
  async created() {
    console.log(this.center);
    console.log();
    const res = await details(this.$route.params.id);

    this.list = res.data.body;
    this.title = res.data.body.community;
    //  console.log(res.data.body);
    this.$nextTick(() => {
      this.center.lng = parseFloat(res.data.body.coord.longitude);
      this.center.lat = parseFloat(res.data.body.coord.latitude);
    });

  },
  mounted() {},
  methods: {
    chak() {
      const arr = this.list.houseImg.map((ele) => {
        return "http://www.xiaoshuaipeng.com:8080" + ele;
      });
      console.log(arr)
      ImagePreview(arr);
    },
    handler({ BMap, map }) {
      console.log(BMap, map);
      //   // this.center.lng = 116.404
      //   // this.center.lat = 39.915
      //   // this.zoom = 15
      // map.enableScrollWheelZoom(true);
      // map.addOverlay(this.center);
      // map.addControl(new BaiduMap.GeolocationControl()); // 添加定位控件
      // map.addControl(new BaiduMap.NavigationControl()); // 添加缩放控件
    },
  },
  // watch:{
  //   center:{
  //     immediate:true,
  //     deep:true,
  //     handler(value){}
  //   }
  // }
};
</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 200px;
}
.van-nav-bar__content {
  background-color: rgba(255, 255, 255, 0);
}
.details {
  .details-img {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      // line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
    }
    img {
      width: 100vw;
      height: 212px;
    }
  }
  .title {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
    p:nth-child(2) {
      font-size: 12px;

      color: white;
      span {
        text-align: center;
        display: inline-block;
        width: 60px;
        background-color: #33ea45;
      }
    }
  }
  .house-title {
    margin-top: 5px;
    background-color: #fff;
  }
}
</style>
